<!-- 
  工艺工时模块页面（选项卡布局）
 -->
<template>
  <div class="main-container">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>工艺路线管理</el-breadcrumb-item>
        <el-breadcrumb-item>产品工艺库</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form inline :model="queryProcessVersionFilters">
      <div class="search-right">
        <el-form-item>
          <el-input v-model="queryProcessVersionFilters.drawingNumber" class="w250" placeholder="输入图号"
            clearable></el-input>
        </el-form-item>
        <el-button type="primary" @click="queryProcessVersion()">查询</el-button>
        <el-button @click="clear()">清空</el-button>
        <el-button id="btnC6AddVersion" type="primary" icon="el-icon-plus" @click="createProcess"
          v-if="$checkAuth('修改工艺路线')">添加工艺版本</el-button>
        <el-button type="primary" @click="processManagement" v-if="$checkAuth('修改工艺路线')">工序管理</el-button>
      </div>
    </el-form>
    <el-table border stripe :data="sixData" row-key="id" @row-dblclick="sixDoubleClick">
      <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
      <el-table-column prop="createTime" label="创建日期" sortable align="center" width="175"></el-table-column>
      <el-table-column prop="versionName" label="版本编号" align="center" width="150"></el-table-column>
      <el-table-column prop="drawingNumber" label="图号" sortable align="center" width="150"></el-table-column>
      <el-table-column prop="productName" label="品名" align="center" width="150"></el-table-column>
      <el-table-column prop="materialQuality" label="材质" align="center" width="150"></el-table-column>
      <el-table-column prop="remark" label="备注" align="center" min-width="100"></el-table-column>
      <!-- <el-table-column label="操作" min-width="250" fixed="right" v-if="$checkAuth('修改工艺路线')"> -->
      <el-table-column label="操作" min-width="250" fixed="right">

        <template slot-scope="scope">
          <!-- 2025-02-10 临时处理 FOR 撰写报告 -->
          <!-- <el-button type="text" @click="sixDoubleClick(scope.row)">详情</el-button> -->

          <el-tag>工艺卡</el-tag>
          <el-button type="text" icon="el-icon-view" @click="工艺卡dialogVisible=true">查看</el-button>

          <el-upload action="https://jsonplaceholder.typicode.com/posts/" style="display: inline-block">
            <el-button type="text" icon="el-icon-upload">上传</el-button>
          </el-upload>

          <el-tag type="success">产品图纸</el-tag>
          <el-button type="text" icon="el-icon-view" @click="产品图纸dialogVisible=true">查看</el-button>
          <el-upload action="https://jsonplaceholder.typicode.com/posts/" style="display: inline-block">
            <el-button type="text" icon="el-icon-upload">上传</el-button>
          </el-upload>

          <el-tag type="warning">3D设计</el-tag>
          <el-button type="text" icon="el-icon-view" @click="downloadDwg()">查看</el-button>
          <el-upload action="https://jsonplaceholder.typicode.com/posts/" style="display: inline-block">
            <el-button type="text" icon="el-icon-upload">上传</el-button>
          </el-upload>
          <!-- <el-button size="mini" type="primary"  @click="editProcess(scope.row)">详情</el-button> -->
          <!-- <el-button size="mini" type="primary"  @click="delProcess(scope.row)">删除</el-button> -->
          <!-- <i :id="'iconC6Modify' + scope.row.drawingNumber + scope.row.versionName" class="iconfont icon-xiugai1" @click="editProcess(scope.row)"></i> -->
          <!-- <i :id="'iconC6Delete' + scope.row.drawingNumber + scope.row.versionName" class="iconfont icon-shanchu1" @click="delProcess(scope.row)"></i> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="queryProcessVersionFilters.page" :page-sizes="[15, 30, 40, 50]"
      :page-size="queryProcessVersionFilters.pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="versionTotalNum" background class="mt10"></el-pagination>
    <add-dialog ref="addDialog"></add-dialog>
    <delete-process ref="deleteProcess"></delete-process>

 <!-- 2025-02-12 临时处理 FOR 撰写报告 -->
    <el-dialog title="产品图纸" :visible.sync="产品图纸dialogVisible" width="80%" >
      <pdf :src="产品图纸pdfUrl"></pdf>
      <span slot="footer" class="dialog-footer">
        <el-button @click="产品图纸dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title="工艺卡" :visible.sync="工艺卡dialogVisible" width="80%" >
      <pdf :src="工艺卡pdfUrl"></pdf>
      <span slot="footer" class="dialog-footer">
        <el-button @click="工艺卡dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { namespace } from 'vuex-class'
import pdf from 'vue-pdf'
import Layout from '@/views/_common/Layout.vue'
import _ from 'lodash'

import AddDialog from './add_process_dialog.vue'
import DeleteProcess from './process_dialog.vue'

const vuexProcess = namespace('TwoProcess')

@Component({
  components: {
    AddDialog,
    DeleteProcess,
    Layout,
    pdf
  }
})
export default class Index extends Vue {
  public $refs!: {
    addDialog: any
    deleteProcess: any
  }

  产品图纸pdfUrl = '/product-pdf.pdf'
  工艺卡pdfUrl = '/0977-429工艺说明卡片.pdf'
  工艺卡dialogVisible=false
  产品图纸dialogVisible=false
  // 工艺版本查询条件
  queryProcessVersionFilters: any = {
    drawingNumber: '',
    page: 1,
    pageSize: 15
  }

  @vuexProcess.Action GET_PROCESS_DATEBASE: any
  @vuexProcess.Action DELETE_VERSION: any
  @vuexProcess.State versionTotalNum: any
  @vuexProcess.State sixData: any

  processManagement() {
    this.$refs.deleteProcess.open()
  }

  /**
   * 清空查询条件
   */
  clear() {
    this.queryProcessVersionFilters = {
      drawingNumber: '',
      page: 1,
      pageSize: 15
    }
    this.queryProcessVersion()
  }
  /**
   * 修改工艺版本
   * 路由跳转
   */
  editProcess(process) {
    console.log('修改工艺版本，即将跳转......')
    console.log(process)
    this.$store.commit('TwoProcess/SET_PRODUCT_ON_MODIFY_VERSION', process)
    this.$router.push({
      name: 'add-process-detail',
      params: {
        inType: '2'
      }
    })
  }

  /**
   * 删除工艺版本
   */
  delProcess(process) {
    this.$alert(`您确定删除[${process.versionName}]？`, '错误提示', {
      confirmButtonText: '确定',
      type: 'error',
      callback: action => {
        if (action === 'confirm') {
          this.$confirm('此操作将永久删除该数据, 是否继续?', '操作提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            type: 'warning'
          })
            .then(() => {
              this.deleteSix(process.versionId)
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        }
      }
    })
  }
  async deleteSix(versionId) {
    let result = await this.DELETE_VERSION({ versionId: versionId })
    if (result) {
      this.GET_PROCESS_DATEBASE({ ...this.queryProcessVersionFilters })
    }
  }

  /*************************
   ***** 生命周期函数 *****
   *************************/
  created() {
    this.queryProcessVersion()
  }

  /**
   * 工艺版本查询
   */
  queryProcessVersion() {
    this.GET_PROCESS_DATEBASE({ ...this.queryProcessVersionFilters })
  }

  createProcess() {
    // 添加工艺版本的对话框
    this.$refs.addDialog.open(false)
  }

  // 分页功能
  handleSizeChange(val) {
    this.queryProcessVersionFilters.pageSize = val
    this.queryProcessVersion()
  }
  handleCurrentChange(val) {
    this.queryProcessVersionFilters.page = val
    this.queryProcessVersion()
  }

  async sixDoubleClick(row) {
    console.log('双击查看工艺版本，即将跳转......')
    console.log(row)
    this.$store.commit('TwoProcess/SET_PRODUCT_ON_MODIFY_VERSION', row)
    this.$router.push({
      name: 'add-process-detail',
      params: {
        product: row,
        intype: '7'
      }
    })
  }
  //2025-02-12 临时处理 FOR 撰写报告
  downloadDwg() {
    window.open('/B2622-848.dwg', '_blank')
  }

}
</script>

<style lang="scss" scoped>
.total {
  float: left;
  // display: inline;
  border: 1px solid #ccc;
  margin-right: 30px;

  .total_title {
    width: 200px;
    color: #000;
    height: 260px;
    line-height: 30px;
    text-align: center;

    .text {
      font-size: 18px;
      font-weight: bold;
      margin: 0 5px;
    }
  }

  &:hover {
    color: #000;
    background: #fff;
  }
}

.breadcrumb {
  height: 25px;
  width: 100%;
  border: none;
}

.s1 {
  display: none;
}

.s2 {
  height: 100px;
  display: none;
}

//通知单滚动
.notice-box {
  display: -webkit-box;
  overflow-x: auto;
  /*适应苹果*/
  -webkit-overflow-scrolling: touch;
}

.notice-item {
  height: 270px;
}

/*隐藏掉滚动条*/
.notice-box::-webkit-scrollbar {
  display: none;
}

.layout .operation {
  overflow-x: auto;
}

.el-tabs {
  padding: 0 20px;
  margin: 0px 10px 0;
  border: 1px solid #e4e7ed;
  background-color: #fff;

  .el-tabs__content {
    min-width: 1200px;
  }
}
</style>
